<template>
    <div class="out-div">
        <div class="level" style="margin-bottom:5px;">
            <div class="level is-mobile top-title-div" style="margin-bottom:5px;">
                <div class="level-left">
                    <figure class="image is-24x24" style="margin-right:10px;">
                        <img class="is-rounded" :src="article.logo">
                    </figure>
                    <span class="top-title">{{article.author}}{{article.what}}&nbsp;·&nbsp;{{article.when}}</span>
                </div>
            </div>
            <div class="level is-mobile">
                <h3><strong>{{article.title}}</strong></h3>
            </div>
        </div>
        <div>
            <article class="media">
                <div class="media-content">
                    <p class="article-brief">{{article.content}}</p>
                </div>
                <figure v-if="article.hasOutPic" class="media-right image" style="width:128px;height:72px;">
                    <img :src="article.outPic">
                </figure>
            </article>
        </div>
        <div class="level is-mobile" style="margin-top:5px;margin-bottom:5px;">
            <div class="level-left" style="color:#9f9f9f">
                <span>{{article.leftNum}}&nbsp;{{article.leftText}}&nbsp;·&nbsp;{{article.rightNum}}&nbsp;{{article.rightText}}</span>
            </div>
            <div class="level-right" style="margin-right:10px;color:#d2d3d4;">
                <span class="icon is-small search-icon">
                    <i class="fas fa-ellipsis-h"></i>
                </span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "IndexArticleItem",
  props: ["article"],
  computed: {},
  methods: {
    formatDivide100: function(num) {
      return num / 100;
    },
    formatDivide1000: function(num) {
      return num / 1000;
    }
  }
};
</script>
<style scoped>
.out-div {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 8px;
  padding-top: 8px;
}
.level-left {
  margin: 0px;
}
.top-title {
  color: #bcbcbc;
}
.article-brief {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  font-size: 16px;
}
</style>
